<template>
    <h3>添加试卷:</h3>
    <div class="test-form">
        <!-- 分类名称 -->
        <el-form-item label="考试分类">

            <el-select v-model="form.id" placeholder="选择考试分类" style="width: 240px">
                <el-option v-for="item in form.category" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>

        </el-form-item>
        <!-- 考试名称 -->
        <el-form-item label="试卷名称">
            <el-input v-model="form.name" placeholder="输入试卷的名称" />
        </el-form-item>
        <!-- 总分 -->
        <el-form-item label="总分">
            <el-input v-model="form.total" placeholder="输入分数" />
        </el-form-item>
        <!-- 及格线 -->
        <el-form-item label="及格线">
            <el-input v-model="form.passline" placeholder="输入试卷的及格线" />
        </el-form-item>
        <!-- 考试试卷 -->
        <el-form-item label="考试时间(秒)">
            <el-input v-model="form.time" placeholder="输入考试的时间" />
        </el-form-item>
        <el-button @click="onSubmit(form)" type="primary">添加</el-button>
    </div>
    <!-- 表格 -->
    <div class="test-list">
        <el-input style="width: 300px;" v-model="search" size="small" placeholder="搜索需要找到的试卷名称" />
        <el-table :data="filterTableData" height="240" style="width: 100%">
            <el-table-column prop="eid" label="eid" />
            <el-table-column prop="text" label="分类名称" />
            <el-table-column prop="name" label="试卷名称" />
            <el-table-column prop="total" label="总分" />
            <el-table-column prop="passline" label="及格线" />
            <el-table-column prop="time" label="考试时长" />
            <!-- 操作 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 编辑器抽屉 -->
    <el-drawer v-model="dialog" title="编辑数据信息:" :before-close="handleClose" direction="ltr" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form-item label="考试分类">

                <el-select v-model="edit_form.id" placeholder="选择考试分类" style="width: 240px">
                    <el-option v-for="item in form.category" :key="item.id" :label="item.text" :value="item.id" />
                </el-select>

            </el-form-item>
            <!-- 考试名称 -->
            <el-form-item label="试卷名称">
                <el-input v-model="edit_form.name" placeholder="输入试卷的名称" />
            </el-form-item>
            <!-- 总分 -->
            <el-form-item label="总分">
                <el-input v-model="edit_form.total" placeholder="输入分数" />
            </el-form-item>
            <!-- 及格线 -->
            <el-form-item label="及格线">
                <el-input v-model="edit_form.passline" placeholder="输入试卷的及格线" />
            </el-form-item>
            <!-- 考试试卷 -->
            <el-form-item label="考试时间(秒)">
                <el-input v-model="edit_form.time" placeholder="输入考试的时间" />
            </el-form-item>


            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? 'Submitting ...' : '提交' }}
                </el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import api from '../../api/http'
import { ElMessage, ElMessageBox, ElDrawer } from 'element-plus'
import { category_list } from '../../api/request'
// 数据................................
//  编辑器抽屉开关
const dialog = ref(false)
// 提交按钮
const loading = ref(false)
// 搜索框
const search = ref('')
// 定时器
let timer: any

// 添加事件时的表单采集表单数据
const form = reactive({
    category: [//考试分类可以从这里拿
        { id: 27, text: '前端' },
        { id: 28, text: '后端' }
    ],
    id: '',
    name: '',
    total: 100,
    passline: 60,
    time: 7200,
})
// 编辑器的表单内容
let edit_form = reactive({
    eid: 0,
    id: 0,
    text: [{ id: 0, text: 'xx' },
    { id: 1, text: 'yy' }],
    name: '',
    total: 100,
    passline: 60,
    time: 7200
})
// 用于初始化清空编辑表单内容
let none = reactive({
    eid: 0,
    id: 0,
    text: [{ id: 0, text: 'xx' },
    { id: 1, text: 'yy' }],
    name: '',
    total: 100,
    passline: 60,
    time: 7200
})
// 试卷列表
const tableData = ref([]);

// 添加试卷...................................................
const onSubmit = async (data: any) => {
    // 拿到表单信息
    let { id, category, name, total, passline, time } = data;
    let text = '';
    // 拿到考试分类名称
    for (let i = 0; i < category.length; i++) {
        if (id == category[i].id) {
            text = category[i].text;
        }
    }
    // 执行添加试卷的接口方法
    await api.exam_add({ id, text, name, total, passline, time })
        .then(content => {
            if (content.code == 200) {
                ElMessage.success(`${content.msg}`)
                getexamListFn();
            }
            else {
                ElMessage.error(`${content.msg}`)
            }
        })
}

// 获取考试分类列表
const getCategoryFn = () => {
    category_list().then(content => {
        if (content.code == 200) {
            // 放入下拉框
            form.category = content.result;
        }
    })
}
getCategoryFn();

// 试卷列表展示..................................................
const getexamListFn = () => {
    api.exam_list_all().then(content => {
        if (content.code == 200) {
            tableData.value = content.result
        }

    })
}
getexamListFn();

// 操作....................................................
// 编辑..................................................
// 编辑试卷信息方法 api.exam_edit()
const setExamFn = async (data = {}) => {
    let { eid, id, text, name, total, passline, time }: any = data;
    for (let i = 0; i < form.category.length; i++) {
        if (form.category[i].id == id) {
            text = form.category[i].text;
        }
    }
    await api.exam_edit({ eid, id, text, name, total, passline, time }).then(conten => {
        ElMessage.success(conten.msg)
        getexamListFn();
    })
}


// 点击编辑按钮
const handleEdit = (index: number, row: any) => {
    //  打开编辑器抽屉
    dialog.value = true
    // 把需要编辑的内容放入到抽屉内展示
    edit_form = row
}

// 确认提交走这里
const onClick = () => {
    loading.value = true
    setExamFn(edit_form);

    setTimeout(() => {
        loading.value = false
        dialog.value = false
        // 清空编辑器
        edit_form = none;
    }, 400)
}

// 关闭之前是否确认编辑数据提交
const handleClose = (done: any) => {
    if (loading.value) {
        return
    }
    ElMessageBox.confirm('需要提交这次的编辑吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        // 确认提交走这里
        .then(() => {
            loading.value = true;
            setExamFn(edit_form);
            timer = setTimeout(() => {
                done()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false
                    // 清空编辑器
                    edit_form = none;
                }, 400)
            }, 2000)
        })
        // 关闭提示走这里
        .catch(() => {
            loading.value = false
            dialog.value = false
            edit_form = none;
            clearTimeout(timer)
        })
}
//直接退出编辑走这里
const cancelForm = () => {
    loading.value = false
    dialog.value = false
    // 清空编辑器
    edit_form = none;
    clearTimeout(timer)
}


// 删除..........................................................
const handleDelete = async (index: number, row: any) => {
    // 删除提示
    ElMessageBox.confirm(`确认删除"${row.name}"试卷吗`)
        .then(() => {
            let eid = row.eid;
            api.exam_delete({ eid }).then(content => {
                if (content.code == 200) {
                    getexamListFn();
                    ElMessage.success(content.msg)
                }
                else {
                    ElMessage.error(content.msg)
                }
            })
        })
        .catch(() => {
            ElMessage.success("已取消")
        })




}

//搜索........................................................
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            (data as { name: string }).name.toLowerCase().includes(search.value.toLowerCase())
    )
)

</script>

<style lang="scss" scoped>
.test-form {
    padding: 10px;
    width: 50%;
}
</style>